<template>
    <div>
        <div class="container w-50 m-auto border border-1 shadow p-5">
            <div class="mb-3">
                <label for="input1" class="form-label">用户名</label>
                <input 
                type="text" 
                v-model="loginName" 
                @change="userName"
                class="form-control" 
                placeholder="请输入账号" 
                name="" 
                id="input1"
                aria-describedby="warning" >
                <div v-if="nameIstrue" id="warning" class="form-text text-danger">用户名不能包含数字信息内容</div>
            </div>
           
            <div class="mb-3">
                <label for="input2" class="form-label">密码</label>
                <input 
                type="text" 
                v-model="loginPassword" 
                @change="userPassword"
                class="form-control" 
                placeholder="请输入密码" 
                name="" 
                id="input2"
                aria-describedby="warning" >
                <div v-if="passIstrue" id="warning" class="form-text text-danger">密码长度控制在6~10个字符之间</div>
            </div>
            <button class="btn btn-outline-primary" @click="sub_btn">登录</button>
        </div>
    </div>
</template>

<script setup>
import { ref,watch } from 'vue';

const loginName = ref('');
const loginPassword = ref('');

const nameIstrue = ref(false);
const passIstrue = ref(false);


const userName = ()=>{
    watch(loginName,(newValue,oldValue)=>{
        if(!(/^\D+$/.test(newValue))){
            nameIstrue.value = true;
        }else{
            nameIstrue.value = false;
        }
    },{
        immediate:true,
        flush:'pre'
    });
}

const userPassword = ()=>{
    watch(loginPassword,(newValue,oldValue)=>{
        if(!(/^\w{6,10}$/.test(newValue))){
            passIstrue.value = true;
        }else{
            passIstrue.value = false;
        }
    },{
        immediate:true,
        flush:'pre'
    });
}

</script>

<style lang="scss" scoped>

</style>